import React, { useMemo } from "react";
import { metaData } from "@cornerstonejs/core";
import type { OverlayProps } from "./types";

const Overlay: React.FC<OverlayProps> = ({ imageId }: OverlayProps) => {
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  const { patient, study, series }: { [key: string]: any } = useMemo(() => {
    if (!imageId) return {};
    const patient = metaData.get("patientModule", imageId);
    const pstudy = metaData.get("patientStudyModule", imageId);
    const study = metaData.get("generalStudyModule", imageId);
    const series = metaData.get("generalSeriesModule", imageId);
    const meta = { patient: { ...patient, ...pstudy }, study, series };
    return meta;
  }, [imageId]);

  const date = series?.seriesDate || series?.acquisitionDate;
  const time = series?.seriesTime || series?.acquisitionTime;

  return patient ? (
    <>
      <div className="absolute top-0 left-1 text-white">
        <div>
          {patient?.patientName?.Alphabetic ||
            patient?.patientName?.Ideographic}
        </div>
        <div>{patient?.patientAge}</div>
        <div>{patient?.patientSex}</div>
      </div>
      <div className="absolute top-0 right-1 text-white text-right">
        <div>{`${date?.year}/${date?.month}/${date?.day}`}</div>
        <div>{`${time?.hours}:${time?.minutes}:${time?.seconds}`}</div>
        <div>{series?.modality}</div>
      </div>
      <div className="absolute bottom-0 left-1 text-white">
        <div>{study?.studyDescription}</div>
      </div>
      <div className="absolute bottom-0 right-1 text-white text-right">
        <div>{series?.seriesNumber}</div>
      </div>
    </>
  ) : null;
};

export default Overlay;
